<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改密码 | VigorLoop</title>


    <!--STYLESHEET-->
    <!--=================================================-->

    <!--Open Sans Font [ OPTIONAL ]-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>


    <!--Bootstrap Stylesheet [ REQUIRED ]-->
    <link href="/static/nifty/css/bootstrap.min.css" rel="stylesheet">


    <!--Nifty Stylesheet [ REQUIRED ]-->
    <link href="/static/nifty/css/nifty.min.css" rel="stylesheet">


    <!--Nifty Premium Icon [ DEMONSTRATION ]-->
    <link href="/static/nifty/css/demo/nifty-demo-icons.min.css" rel="stylesheet">


    <!--Demo [ DEMONSTRATION ]-->
    <link href="/static/nifty/css/demo/nifty-demo.min.css" rel="stylesheet">


    <!--Font Awesome [ OPTIONAL ]-->
    <link href="/static/nifty/plugins/magic-check/css/magic-check.min.css" rel="stylesheet">


    <!--Bootstrap Validator [ OPTIONAL ]-->
    <link href="/static/nifty/plugins/bootstrap-validator/bootstrapValidator.min.css" rel="stylesheet">


    <!--JAVASCRIPT-->
    <!--=================================================-->

    <!--Pace - Page Load Progress Par [OPTIONAL]-->
    <link href="/static/nifty/plugins/pace/pace.min.css" rel="stylesheet">
    <script src="/static/nifty/plugins/pace/pace.min.js"></script>


    <!--jQuery [ REQUIRED ]-->
    <script src="/static/nifty/js/jquery-2.2.4.min.js"></script>


    <!--BootstrapJS [ RECOMMENDED ]-->
    <script src="/static/nifty/js/bootstrap.min.js"></script>


    <!--NiftyJS [ RECOMMENDED ]-->
    <script src="/static/nifty/js/nifty.min.js"></script>


    <!--=================================================-->

    <!--Demo script [ DEMONSTRATION ]-->
    <script src="/static/nifty/js/demo/nifty-demo.min.js"></script>


    <!--Bootstrap Wizard [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>


    <!--Bootstrap Validator [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/bootstrap-validator/bootstrapValidator.min.js"></script>


    <!--Form Wizard [ SAMPLE ]-->
    <script src="/static/nifty/js/demo/form-wizard.js"></script>


    <!--=================================================

    REQUIRED
    You must include this in your project.


    RECOMMENDED
    This category must be included but you may modify which plugins or components which should be included in your project.


    OPTIONAL
    Optional plugins. You may choose whether to include it in your project or not.


    DEMONSTRATION
    This is to be removed, used for demonstration purposes only. This category must not be included in your project.


    SAMPLE
    Some script samples which explain how to initialize plugins or components. This category should not be included in your project.


    Detailed information and more samples can be found in the document.

    =================================================-->

</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->
<body>
<div id="container" class="effect aside-float aside-bright mainnav-lg">

    <!--NAVBAR-->
    <!--===================================================-->
    <header id="navbar">
        <div id="navbar-container" class="boxed">

            <!--Brand logo & name-->
            <!--================================-->
            <div class="navbar-header">
                <a href="" class="navbar-brand">
                    <img src="/static/nifty/img/logo.png" alt="VigorLoop Logo" class="brand-icon">
                    <div class="brand-title">
                        <span class="brand-text">VigorLoop</span>
                    </div>
                </a>
            </div>
            <!--================================-->
            <!--End brand logo & name-->


            <!--Navbar Dropdown-->
            <!--================================-->
            <div class="navbar-content clearfix">
                <ul class="nav navbar-top-links pull-left">

                    <!--Navigation toogle button-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li class="tgl-menu-btn">
                        <a class="mainnav-toggle" href="#">
                            <i class="demo-pli-view-list"></i>
                        </a>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End Navigation toogle button-->


                </ul>
                <ul class="nav navbar-top-links pull-right">

                    <!--User dropdown-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li id="dropdown-user" class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle text-right">
                                <span class="pull-right">
                                    <!--<img class="img-circle img-user media-object" src="/static/nifty/img/profile-photos/1.png" alt="Profile Picture">-->
                                    <i class="demo-pli-male ic-user"></i>
                                </span>
                            <div class="username hidden-xs">
                                {% if user.is_authenticated %}{{ user.username }}{% else %}未登录用户{% endif %}</div>
                        </a>


                        <div class="dropdown-menu dropdown-menu-md dropdown-menu-right panel-default">

                            <!-- Dropdown heading  -->
                            <div class="pad-all bord-btm">
                                欢迎使用 VigorLoop！
                            </div>


                            <!-- User dropdown menu -->
                            <ul class="head-list">
                                <li>
                                    <a href="/user_center/">
                                        <i class="demo-pli-male icon-lg icon-fw"></i> 个人中心
                                    </a>
                                </li>

                            </ul>

                            <!-- Dropdown footer -->
                            <div class="pad-all text-right">
                                <a href="/logout/" class="btn btn-primary">
                                    <i class="demo-pli-unlock"></i> 退出
                                </a>
                            </div>
                        </div>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End user dropdown-->
                </ul>
            </div>
            <!--================================-->
            <!--End Navbar Dropdown-->

        </div>
    </header>
    <!--===================================================-->
    <!--END NAVBAR-->

    <div class="boxed">

        <!--CONTENT CONTAINER-->
        <!--===================================================-->
        <div id="content-container">

            <!--Page Title-->
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <div id="page-title">
                <h1 class="page-header text-overflow">个人中心</h1>

            </div>
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <!--End page title-->

            <!--Page content-->
            <!--===================================================-->
            <div id="page-content">

                <div class="row">

                    <div class="col-lg-12">

                        <hr class="new-section-sm bord-no">
                        <h4 class="text-main pad-btm bord-btm">修改密码</h4>
                        <div class="panel">

                            <!-- Form wizard with Validation -->
                            <!--===================================================-->
                            <div id="demo-bv-wz">
                                <div class="wz-heading pad-top">

                                    <!--Nav-->
                                    <ul class="row wz-step wz-icon-bw wz-nav-off mar-top">

                                        <li class="col-xs-6">
                                            <a data-toggle="tab" href="#demo-bv-tab1">
                                                <span class="text-error"><i class="demo-pli-home icon-2x"></i></span>
                                                <p class="text-semibold mar-no">输入当前密码</p>
                                            </a>
                                        </li>
                                        <li class="col-xs-6">
                                            <a data-toggle="tab" href="#demo-bv-tab2">
                                                <span class="text-info"><i
                                                        class="demo-pli-lock-user icon-2x"></i></span>
                                                <p class="text-semibold mar-no">输入新密码</p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                                <!--progress bar-->
                                <div class="progress progress-xs">
                                    <div class="progress-bar progress-bar-primary"></div>
                                </div>

                                <!--Form-->
                                <form id="demo-bv-wz-form" class="form-horizontal" method="POST"
                                      action="{% url 'change_password' %}">
                                    {% csrf_token %}
                                    <div class="panel-body">
                                        <div class="tab-content">

                                            <!-- First tab -->
                                            <div id="demo-bv-tab1" class="tab-pane active">
                                                <div class="form-group">
                                                    <label class="col-lg-3 control-label">用户名</label>
                                                    <div class="col-lg-7">
                                                        <p class="form-control-static">
                                                            {% if user.is_authenticated %}{{ user.username }}{% else %}
                                                                未登录用户{% endif %}</p>
                                                    </div>
                                                </div>

                                                <!-- Password confirmation -->
                                                <div class="form-group">
                                                    <label class="col-lg-3 control-label">当前密码</label>
                                                    <div class="col-lg-7">
                                                        <input type="password" placeholder="输入当前密码"
                                                               name="currentPassword" id="currentPassword"
                                                               class="form-control" required>
                                                    </div>

                                                    <div id="password-error-message" class="text-center"
                                                         style="color: red; display: none;margin-top: 20px;"></div>
                                                </div>

                                                <!-- Display error message if password is incorrect -->
                                                {% if messages %}
                                                    {% for message in messages %}
                                                    <div class="text-danger text-center">
                                                        {{ message }}
                                                    </div>
                                                    {% endfor %}
                                                {% endif %}
                                            </div>

                                            <!-- Second tab (new password form) -->
                                            <div id="demo-bv-tab2" class="tab-pane fade">
                                                <fieldset>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">新密码</label>
                                                        <div class="col-lg-7">
                                                            <input type="password" class="form-control"
                                                                   name="newPassword" placeholder="输入新密码" required>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-lg-3 control-label">重复新密码</label>
                                                        <div class="col-lg-7">
                                                            <input type="password" class="form-control"
                                                                   name="confirmNewPassword"
                                                                   placeholder="请再输入一次新密码" required>
                                                        </div>
                                                    </div>
                                                </fieldset>
                                            </div>

                                        </div>
                                    </div>

                                    <!-- Footer button -->
                                    <div class="panel-footer text-right">
                                        <div class="box-inline">
                                            <button type="button" class="previous btn btn-primary">返回上一步</button>
                                            <button type="button" class="next btn btn-primary">下一步</button>
                                            <button type="submit" class="finish btn btn-warning">提交修改</button>
                                        </div>
                                    </div>
                                </form>

                                <script>
                                    $(document).ready(function () {
                                        // Use bootstrapValidator for validating new password and confirmation password
                                        $('#demo-bv-wz-form').bootstrapValidator({
                                            fields: {
                                                newPassword: {
                                                    validators: {
                                                        notEmpty: {
                                                            message: 'The password is required and can\'t be empty'
                                                        },
                                                        identical: {
                                                            field: 'confirmNewPassword',
                                                            message: 'The password and its confirm are not the same'
                                                        }
                                                    }
                                                },
                                                confirmNewPassword: {
                                                    validators: {
                                                        notEmpty: {
                                                            message: 'The confirm password is required and can\'t be empty'
                                                        },
                                                        identical: {
                                                            field: 'newPassword',
                                                            message: 'The password and its confirm are not the same'
                                                        }
                                                    }
                                                }
                                            }
                                        }).on('success.field.bv', function (e, data) {
                                            var $parent = data.element.parents('.form-group');
                                            $parent.removeClass('has-success');
                                        });

                                        // 点击"Next"按钮时触发当前密码验证
                                        $('.next').on('click', function () {
                                            var currentPassword = $('#currentPassword').val();

                                            $.ajax({
                                                url: '{% url "validate_current_password" %}',  // URL to validate current password
                                                method: 'POST',
                                                data: {
                                                    'currentPassword': currentPassword,
                                                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                                                },
                                                success: function (response) {
                                                    if (response.valid) {
                                                        $('#password-error-message').text('当前密码验证成功').show();
                                                        $('#demo-bv-wz-form').bootstrapValidator('validate');

                                                    } else {
                                                        // 密码错误，显示错误消息，并保持在第一个tab
                                                        // 如果当前密码验证失败，显示错误消息并保持在当前tab
                                                        $('#password-error-message').text('').hide();
                                                        $('#password-error-message').text('密码错误，请重试！').show();
                                                        {#$('#password-error-message').text('').show();#}
                                                        $('.previous').click();
                                                    }
                                                }
                                            });
                                        });
                                    });
                                </script>

                            </div>

                            <!--===================================================-->
                            <!-- End Form wizard with Validation -->

                        </div>
                    </div>
                </div>

            </div>
            <!--===================================================-->
            <!--End page content-->

        </div>
        <!--===================================================-->
        <!--END CONTENT CONTAINER-->


        <!--MAIN NAVIGATION-->
        <!--===================================================-->
        <nav id="mainnav-container">
            <div id="mainnav">

                <!--Menu-->
                <!--================================-->
                <div id="mainnav-menu-wrap">
                    <div class="nano">
                        <div class="nano-content">

                            <!--Profile Widget-->
                            <!--================================-->
                            <div id="mainnav-profile" class="mainnav-profile">
                                <div class="profile-wrap">
                                    <div class="pad-btm">
                                        <img class="img-circle img-sm img-border"
                                             src="/static/nifty/img/profile-photos/1.png" alt="Profile Picture">
                                    </div>
                                    <a href="#profile-nav" class="box-block" data-toggle="collapse"
                                       aria-expanded="false">
                                        <p class="mnp-name">{% if user.is_authenticated %}{{ user.username }}{% else %}
                                            未登录用户{% endif %}</p>
                                    </a>
                                </div>
                            </div>

                            <ul id="mainnav-menu" class="list-group">

                                <!--Category name-->
                                <li class="list-header">健康中心</li>

                                <!--Menu list item-->
                                <li>
                                    <a href="/index/">
                                        <i class="demo-psi-home"></i>
                                        <span class="menu-title">
												<strong>首页</strong>
											</span>
                                    </a>
                                </li>

                                <!--Menu list item-->
                                <li>
                                    <a href="#">
                                        <i class="demo-psi-boot-2"></i>
                                        <span class="menu-title">
												<strong>我的运动数据</strong>
											</span>
                                        <i class="arrow"></i>
                                    </a>

                                    <!--Submenu-->
                                    <ul class="collapse">
                                        <li><a href="/exercise_info/exercise_record/">查看运动数据</a></li>
                                        <li><a href="/exercise_info/add_exercise_record/">新增运动数据</a></li>
                                    </ul>
                                </li>

                                <li>
                                    <a href="#">
                                        <i class="demo-psi-star"></i>
                                        <span class="menu-title">
												<strong>我的运动目标</strong>
											</span>
                                        <i class="arrow"></i>
                                    </a>

                                    <!--Submenu-->
                                    <ul class="collapse">
                                        <li><a href="/exercise_info/exercise_goal/">查看运动目标</a></li>
                                        <li><a href="/exercise_info/exercise_goal/">新增运动目标</a></li>
                                    </ul>
                                </li>

                                <!--Menu list item-->
                                <li>
                                    <a href="/health_profile/">
                                        <i class="demo-psi-receipt-4"></i>
                                        <span class="menu-title">
												<strong>我的健康数据</strong>
											</span>
                                        <i class="arrow"></i>
                                    </a>

                                    <!--Submenu-->
                                    <ul class="collapse">
                                        <li><a href="/health_profile/">查看健康数据</a></li>
                                        <li><a href="/health_profile/add/">新增健康数据</a></li>
                                        <li><a href="/health_profile/analysis">健康分析</a></li>
                                    </ul>
                                </li>

                                <li class="list-divider"></li>

                                <!--Category name-->
                                <li class="list-header">其他</li>

                                <!--Menu list item-->
                                <li class="active-link">
                                    <a href="/user_center/">
                                        <i class="demo-psi-male"></i>
                                        <span class="menu-title">
												<strong>个人中心</strong>
											</span>
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
                <!--================================-->
                <!--End menu-->

            </div>
        </nav>
        <!--===================================================-->
        <!--END MAIN NAVIGATION-->

    </div>

    <!-- SCROLL PAGE BUTTON -->
    <!--===================================================-->
    <button class="scroll-top btn">
        <i class="pci-chevron chevron-up"></i>
    </button>
    <!--===================================================-->

</div>
<!--===================================================-->
<!-- END OF CONTAINER -->

</body>
</html>
